<template>
  <div class="page">
    <ul class="pagenation">
      <li>
        <img
          src="../../assets/img/left_arrow.png"
          alt=""
        >
      </li>
      <li class="active">
        1
      </li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>
        <img
          src="../../assets/img/right_arrow.png"
          alt=""
        >
      </li>
    </ul>
  </div>
</template>

<script></script>

<style lang="scss" scoped>
.page {
  .pagenation {
    display: flex;
    flex-direction: row;
    width: 16.5rem;
    margin: 0 auto 3.63rem auto;

    li {
      width: 1.88rem;
      cursor: pointer;
      height: 1.88rem;
      background: rgba(255, 255, 255, 1);
      border: 0.06px solid rgba(110, 110, 110, 1);
      font-size: 1rem;
      text-align: center;
      line-height: 1.88rem;
      margin: 0 0.25rem;
      object-fit: contain;

      img {
        vertical-align: middle;
        width: 0.69rem;
        height: 1.06rem;
      }

      &.active {
        background: rgba(17, 17, 17, 1);
        color: #fff;
      }

      &:hover {
        background: rgba(17, 17, 17, 1);
        color: #fff;
      }
    }
  }
}
</style>
